import { FC } from 'react';
import { Animated, Dimensions, Image, Linking, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import Spinner from 'react-native-loading-spinner-overlay';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Shadow } from 'react-native-shadow-2';

import FastImage from '@d11/react-native-fast-image';
import LottieView from 'lottie-react-native';

import useSubscribe from './hook';
import { PrivacyAgreementUrl, SubscriptionAgreementUrl, VipAgreementUrl } from '@/constants';
import usePress from '@/hooks/usePress';
import { pxToVh, pxToVw } from '@/utils/pxToVx';

const Subscription: FC = () => {
  const insets = useSafeAreaInsets();
  const {
    isTrial,
    showExitButton,
    isSubscribing,
    selectedPlanCode,
    planList,
    handleClickClose,
    handlePlanChange,
    handleClickSubscribe,
    handleRecoveryPurchaseRecord,
  } = useSubscribe();
  const { handlePressIn, handlePressOut, scaleValue } = usePress();
  // const weeklyPlan = planList.find(item => item.code === WEEKLY_PRODUCT_ID);

  // const Badge = require('@assets/images/subscription/badge.png');
  // const BadgeActive = require('@assets/images/subscription/badge_active.png');

  return (
    <View style={styles.root}>
      <View style={styles.bg_video}>
        <Image style={styles.bg_image} resizeMode={'stretch'} source={require('@assets/images/subscription/bg.png')} />
      </View>
      <Spinner visible={isSubscribing} textContent={'Subscribing...'} textStyle={styles.spinner} />
      <View style={[styles.container, { top: insets.top, paddingBottom: insets.bottom }]}>
        {/* Back Icon */}
        <View style={styles.back_icon_wrapper}>
          {showExitButton ? (
            <Pressable
              onPress={handleClickClose}
              hitSlop={{ top: 30, bottom: 50, left: 30, right: 50 }}
              style={styles.back_icon_container}
            >
              <FastImage source={require('@assets/images/subscription/icon_close.png')} style={styles.back_icon} />
            </Pressable>
          ) : (
            <View />
          )}

          <Pressable onPress={handleRecoveryPurchaseRecord} hitSlop={{ top: 30, bottom: 30, left: 30, right: 30 }}>
            <FastImage source={require('@assets/images/subscription/icon_restore.png')} style={styles.restore_icon} />
          </Pressable>
        </View>

        {/* Content */}
        <View style={styles.content}>
          <FastImage
            source={require('@assets/images/subscription/content.png')}
            resizeMode="contain"
            style={styles.content_description}
          />
          <View style={[styles.footer, { paddingBottom: insets.bottom }]}>
            {/* plan */}
            <ScrollView
              style={styles.plan_wrapper_container}
              contentContainerStyle={styles.plan_container}
              showsHorizontalScrollIndicator={false}
              horizontal
            >
              {planList.map((item) => (
                <Pressable key={item.code} onPress={() => handlePlanChange(item.code)}>
                  <View style={[styles.plan_wrapper, selectedPlanCode === item.code && styles.plan_active]}>
                    {item.recommend && (
                      <View style={styles.badge_wrapper}>
                        <View style={styles.badge}>
                          {selectedPlanCode !== item.code && (
                            <View style={[StyleSheet.absoluteFill, styles.badge_active]} />
                          )}
                          <Text style={styles.badge_text}>{'Save 85%'}</Text>
                        </View>
                      </View>
                    )}
                    <View>
                      {item.recommend && (
                        <Text style={[styles.plan_title, selectedPlanCode === item.code && styles.plan_title_active]}>
                          {'BEST VALUE'}
                        </Text>
                      )}
                      <Text style={[styles.plan_name, selectedPlanCode === item.code && styles.plan_name_active]}>
                        {item.name}
                      </Text>
                      <Text
                        style={[
                          styles.plan_week_price,
                          selectedPlanCode === item.code && styles.plan_week_price_active,
                        ]}
                      >
                        {item.description}
                      </Text>
                      <Text style={[styles.plan_price, selectedPlanCode === item.code && styles.plan_price_active]}>
                        {item.symbol}
                        {item.displayPrice}
                      </Text>
                    </View>
                    <View style={[styles.inactive, selectedPlanCode === item.code && styles.active_wrapper]}>
                      {selectedPlanCode === item.code && <View style={styles.active} />}
                    </View>
                  </View>
                </Pressable>
              ))}
            </ScrollView>

            {/* button */}
            <Pressable onPressIn={handlePressIn} onPressOut={handlePressOut} onPress={handleClickSubscribe}>
              <Animated.View
                style={{
                  transform: [{ scale: scaleValue }],
                }}
              >
                <Shadow
                  style={styles.create_button_wrapper}
                  distance={1}
                  startColor="rgba(23, 91, 193, 1)"
                  offset={[0, 5]}
                >
                  <View style={styles.create_button}>
                    {isSubscribing ? (
                      <LottieView
                        source={require('@assets/animation/subscription_loading.json')}
                        style={styles.animation}
                        autoPlay
                        loop
                      />
                    ) : (
                      <Text style={styles.create_button_text}>{isTrial ? 'Try for $0.00' : 'Continue'}</Text>
                    )}
                  </View>
                </Shadow>
              </Animated.View>
            </Pressable>

            {/* 协议 */}
            <View style={styles.server_agent_wrapper}>
              <Text style={styles.server_agent_text}>
                <Text
                  onPress={() => {
                    Linking.openURL(PrivacyAgreementUrl);
                  }}
                >
                  Privacy
                </Text>
                <Text>{' | '}</Text>
                <Text
                  onPress={() => {
                    Linking.openURL(VipAgreementUrl);
                  }}
                >
                  Term
                </Text>
              </Text>
              <Text
                onPress={() => {
                  Linking.openURL(SubscriptionAgreementUrl);
                }}
                style={styles.cancel_text}
              >
                Automatic renewal
              </Text>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    // backgroundColor: '#DBF0FF',
    flex: 1,
  },
  container: {
    width: '100%',
    height: '100%',
    position: 'relative',
  },
  back_icon_wrapper: {
    marginTop: pxToVh(10),
    marginLeft: pxToVw(16),
    marginRight: pxToVw(19),
    justifyContent: 'space-between',
    flexDirection: 'row',
    position: 'relative',
    zIndex: 10,
  },
  restore_icon: {
    width: pxToVw(74),
    height: pxToVh(34),
    borderRadius: pxToVh(17),
  },
  back_icon_container: {
    // width: pxToVw(30),
    // height: pxToVh(30),
    // borderRadius: pxToVh(15),
    // backgroundColor: 'rgba(0,0,0, 0.25)',
    // justifyContent: 'center',
    // alignItems: 'center',
  },
  back_icon: {
    width: pxToVw(40),
    height: pxToVh(40),
    borderRadius: pxToVh(20),
  },
  bg_video: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 0,
  },
  bg_image: {
    width: '100%',
    height: '100%',
  },
  content: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-end',
    alignItems: 'center',
    width: '100%',
  },
  content_description: {
    width: 333,
    height: pxToVh(425),
    rowGap: pxToVh(14),
    justifyContent: 'center',
    paddingLeft: pxToVw(20),
    marginBottom: pxToVh(30),
  },
  footer: {
    width: '100%',
    alignItems: 'center',
    paddingHorizontal: pxToVw(20),
  },
  plan_wrapper_container: {
    marginBottom: pxToVh(22),
  },
  plan_container: {
    columnGap: pxToVw(6),
    marginTop: pxToVh(10),
  },
  plan_wrapper: {
    position: 'relative',
    width: 94,
    height: 150,
    alignItems: 'center',
    paddingVertical: pxToVh(14),
    borderRadius: pxToVw(12),
    backgroundColor: 'rgba(170, 211, 255, 1)',
    justifyContent: 'space-between',
  },
  plan_name: {
    fontFamily: 'Prompt-SemiBold',
    fontSize: pxToVw(17),
    lineHeight: pxToVh(22),
    fontWeight: '600',
    color: 'rgba(255, 255, 255, 1)',
    textAlign: 'center',
    marginBottom: pxToVh(3),
  },
  plan_name_active: {
    color: 'rgba(79, 149, 245, 1)',
  },
  plan_week_price: {
    fontFamily: 'Prompt-SemiBold',
    fontSize: pxToVw(9),
    lineHeight: pxToVh(11),
    fontWeight: '600',
    textAlign: 'center',
    marginBottom: pxToVh(12),
    color: 'rgba(255, 255, 255, 1)',
  },
  plan_week_price_active: {
    color: 'rgba(79, 149, 245, 1)',
  },
  plan_active: {
    borderWidth: 2.5,
    borderColor: 'rgba(255, 199, 60, 1)',
    backgroundColor: 'rgba(255, 255, 255, 1)',
  },
  plan_title: {
    fontFamily: 'Prompt-Regular',
    fontSize: pxToVw(11),
    lineHeight: pxToVh(15),
    color: 'rgba(255, 255, 255, 1)',
    marginBottom: pxToVh(8),
  },
  plan_title_active: {
    color: 'rgba(242, 125, 0, 1)',
  },
  plan_price: {
    fontFamily: 'Prompt-SemiBold',
    height: pxToVh(17),
    lineHeight: pxToVh(22),
    fontWeight: '600',
    textAlign: 'center',
    color: 'rgba(255, 255, 255, 1)',
  },
  plan_price_active: {
    color: 'rgba(255, 199, 60, 1)',
  },
  inactive: {
    width: 16,
    height: 16,
    borderRadius: 8,
    borderWidth: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderColor: 'rgba(255, 255, 255, 1)',
  },
  active_wrapper: {
    borderColor: 'rgba(39, 142, 255, 1)',
  },
  active: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: 'rgba(39, 142, 255, 1)',
  },
  badge_wrapper: {
    position: 'absolute',
    top: -10,
    right: 0,
    left: 0,
    zIndex: 1,
  },
  badge: {
    marginHorizontal: pxToVw(16),
    backgroundColor: 'rgba(255, 199, 60, 1)',
    height: pxToVh(17),
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: pxToVw(7),
  },
  badge_active: {
    backgroundColor: 'rgba(255, 255, 255, 0.5)',
    borderRadius: pxToVw(7),
  },
  badge_text: {
    fontFamily: 'Prompt-SemiBold',
    fontSize: pxToVw(9),
    lineHeight: pxToVh(11),
    fontWeight: '600',
    textAlign: 'center',
    color: 'rgba(51, 113, 198, 1)',
  },

  create_button_wrapper: {
    width: Dimensions.get('window').width - pxToVw(40),
    height: pxToVh(62),
    borderRadius: pxToVw(31),
    display: 'flex',
    justifyContent: 'center',
  },
  create_button: {
    width: '100%',
    height: pxToVh(62),
    borderRadius: pxToVw(31),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(39, 142, 255, 1)',
  },
  create_button_text: {
    fontSize: pxToVw(17),
    fontWeight: '500',
    lineHeight: pxToVh(25),
    height: pxToVh(26),
    color: '#FFF',
    textAlign: 'center',
  },
  server_agent_wrapper: {
    width: '100%',
    fontSize: pxToVw(12),
    flexDirection: 'row',
    alignItems: 'center',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    marginVertical: pxToVh(8),
    paddingHorizontal: pxToVw(20),
    marginTop: pxToVh(25),
  },
  cancel_text: {
    fontSize: pxToVw(11),
    lineHeight: pxToVh(13),
    color: 'rgba(17, 58, 102, 1)',
  },
  server_agent_text: {
    color: 'rgba(17, 58, 102, 1)',
    fontSize: pxToVw(11),
    lineHeight: pxToVh(13),
  },
  spinner: {
    color: '#FFF',
  },
  animation: {
    width: '100%',
    height: pxToVh(25),
  },
});

export default Subscription;
